<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/head :: head(~{:: title})">
    <title>添加索引</title>
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css"/>
    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
</head>
<body>
<nav th:replace="fragments/navbar :: navbar">navbar</nav>
<div class="container-fluid">
    <div th:insert="fragments/alert :: alert">alert</div>
    <div class="text-left">
        <a th:href="@{'/table/' + ${table.id} }">返回</a>
    </div>
    <h3 class="text-center">添加索引</h3>
    <br/>
    <div>
        <form action="do" class="form-horizontal" role="form" method="post">
            <input type="hidden" name="id" th:value="${index.id}"/>
            <input type="hidden" name="tableId" th:value="${table.id}"/>
            <div class="form-group">
                <label class="control-label col-sm-2" for="columnNames">索引字段:</label>
                <div class="col-sm-10">
                    <div class="row form-group">
                        <input id="columnNames" type="text" name="columnNames"
                               class="form-control input-sm" readonly="readonly"/>
                    </div>
                </div>
            </div>
            <div>
                <label class="control-label col-sm-2">字段选择：</label>
                <div class="col-sm-10 row">
                    <div th:each="column,iterStat : ${table.columnList}" class="form-group col-sm-4">
                            <input type="button" class="btn btn-sm" value="选择"
                                   th:id="${'btn_' + column.columnName}"
                                   th:onclick="@{'javascript:add(\'' + ${column.columnName} + '\')'}"
                                   onclick="javascript:add(this)">
                            <span>&nbsp;&nbsp;</span>
                            <span th:id="@{'c_name_' + ${iterStat.count} }" th:text="${column.columnName}"></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="indexName">名称字段:</label>
                <div class="col-sm-10">
                    <div class="row form-group">
                        <input id="indexName" type="text" name="indexName"
                               th:value="'idx__' + ${table.tableName}"
                               class="form-control input-sm"/>
                    </div>
                </div>
            </div>
            <div class="form-group text-center">
                <input type="reset" value="重置" onclick="$(':button').removeAttr('disabled')"/> &nbsp;&nbsp;&nbsp;
                <input type="submit" value="提交"/>
            </div>
        </form>

    </div>
    <div th:replace="fragments/footer :: copy"></div>
</div>
<script type="text/javascript">
    function add(columnName) {
        $("#indexName").val($("#indexName").val() + '__' + columnName);
        var columnNames = $("#columnNames").val() + ',' + columnName;
        if(columnNames.indexOf(",") == 0){
            $("#columnNames").val(columnNames.substr(1));
        }else{
            $("#columnNames").val(columnNames);
        }
        $("#btn_" + columnName).attr("disabled", "disabled");
    }





</script>
</body>
</html>